<template>
  <div class="msg-container">
    <p>{{data.title}}</p>
    <div class="msg-content border-bottom">
      {{data.content}}
    </div>
    <div class="msg-btm">
      <label class="btm-left">
        <i class="logo"></i>
        <span>满易金</span>
      </label>
      <span class="btm-right">
        {{data.date}}
      </span>
    </div>
  </div>
</template>
<script>
  export default {
    name:'systemMessage',
    props:{
      data:{
        type:Object,
        default:null
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  .msg-container
    background-color white
    border-radius .12rem
    color #777777
    padding .24rem
    box-sizing border-box
    p
      font-weight bold
      line-height .4rem
      color $darkTextColor
      font-size .3rem
    .msg-content
      padding .2rem 0
      line-height .4rem
      box-sizing border-box
    .msg-btm
      display flex
      justify-content space-between
      align-items center
      margin-top .2rem
      .btm-left
        display flex
        align-items center
        span
          margin-left .1rem
          color #BBBBBB
          font-size .24rem
      .logo
        background url("/static/img/logo-sm.png") no-repeat;
        width .4rem
        height .4rem
        background-size 100% 100%

</style>
